import React, { ReactElement, useRef, useState, useEffect } from 'react';
import {
  Button,
  message,
  Tree,
  TreeSelect,
  InputNumber,
  Form,
  Select,
  Upload,
} from 'antd';

const { Option } = Select;
import ProForm, {
  DrawerForm,
  ProFormText,
  ProFormMoney,
  ProFormRadio,
  ProFormUploadButton,
  ProFormSelect,
} from '@ant-design/pro-form';

// 引入 API
import { updateGoods, updateType } from '@/api/goods';
import { getGoodsType, getTypes } from '@/api/goodsType';
import { getServiceType } from '@/api/service-type';
interface Props {
  reload: () => void;
  goods: any;
}

export default function AddGoods({ reload, goods }: Props): ReactElement {
  const formRef = useRef();
  useEffect(() => {
    getSelect();
  }, []);

  // 类型初始化数据
  const [serviceTypeTreeData, setserviceTypeTreeData] = useState<getTypes[]>(
    [],
  );
  const [goodsTypeTreeData, setgoodsTypeTreeData] = useState<getTypes[]>([]);

  const getSelect = async () => {
    const res1 = await getGoodsType('' as getTypes);
    const res2 = await getServiceType('' as getTypes);
    if (res1.status && res2.status && 200) {
      setgoodsTypeTreeData(() => {
        return [...res1.data.rows.children];
      });
      setserviceTypeTreeData(() => {
        return [...res2.data.rows.children];
      });
    }
  };

  const updateNewGoods = async (values: updateType) => {
    let obj = {
      ...values,
      id: goods.id,
    };
    const res = await updateGoods(obj);
    console.log('addgoods', res);
    if (res.status === 200) {
      reload();
      message.success('修改成功');
    } else {
      message.error('修改失败');
    }
  };

  return (
    <DrawerForm<updateType>
      title="新增商品"
      formRef={formRef}
      initialValues={goods}
      trigger={
        <Button type="primary" style={{ marginRight: '20px' }}>
          修改
        </Button>
      }
      autoFocusFirstInput
      drawerProps={{
        forceRender: true,
        destroyOnClose: true,
      }}
      onFinish={async (values) => {
        const res = await updateNewGoods(values);

        return true;
      }}
      width={500}
    >
      <ProFormText
        name="name"
        // width="md"
        width={400}
        label="商品名称："
        placeholder="请输入名称"
      />
      <Form.Item label="商品类型" name="goodstypeId">
        <TreeSelect
          style={{ width: 400 }}
          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
          treeData={goodsTypeTreeData}
          defaultValue={goods.gname}
          placeholder="Please select"
        />
      </Form.Item>
      <Form.Item label="服务类型" name="serviceTypeId">
        <TreeSelect
          style={{ width: 400 }}
          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
          treeData={serviceTypeTreeData}
          defaultValue={goods.serviceTypeId}
          placeholder="Please select"
        />
      </Form.Item>
      <ProFormText
        name="describe"
        // width="md"
        width={400}
        label="描述："
        placeholder="请输入名称"
      />
      <Form.Item label="价格" colon={true} name="price">
        <InputNumber />
      </Form.Item>

      <Form.Item label="数量" name="counts">
        <InputNumber />
      </Form.Item>
      <Form.Item label="状态" name="status">
        <Select defaultValue={goods.status}>
          <Option value="0">未上架</Option>
          <Option value="1">上架</Option>
        </Select>
      </Form.Item>
      <ProFormUploadButton
        name="upload"
        label="商品图片"
        max={1}
        fileList={[goods]}
        fieldProps={{
          name: 'file',
          listType: 'picture-card',
        }}
        action="http://47.98.128.191:3000/images/uploadImages"
      />
    </DrawerForm>
  );
}
